<!--begin::Signin-->
<div class="m-login__signin">
	<div class="m-login__title">
		<h3 class="m-login__title">Sign Up</h3>
		<div class="m-login__desc">Enter your details to create your account:</div>
	</div>

	<m-auth-notice></m-auth-notice>

	<!--begin::Form-->
	<form class="m-login__form m-form" name="form" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>
		<div class="form-group">
			<mat-form-field>
				<mat-label>Fullname</mat-label>
				<input matInput type="text" name="fullname" placeholder="Fullname" autocomplete="off" [(ngModel)]="model.fullname" #fullname="ngModel" required>
			</mat-form-field>
		</div>
		<div class="form-group">
			<mat-form-field>
				<mat-label>Email</mat-label>
				<input matInput type="email" name="email" placeholder="Email address" autocomplete="off" [(ngModel)]="model.email" #email="ngModel" email="true" required>
			</mat-form-field>
		</div>
		<div class="form-group">
			<mat-form-field>
				<mat-label>Password</mat-label>
				<input matInput minlength="4" type="password" name="password" placeholder="Password" autocomplete="off" [(ngModel)]="model.password" #password="ngModel" required>
			</mat-form-field>
		</div>
		<div class="form-group">
			<mat-form-field>
				<mat-label>Confirm Password</mat-label>
				<input matInput minlength="4" type="password" name="rpassword" placeholder="Confirm password" autocomplete="off" [(ngModel)]="model.rpassword" #rpassword="ngModel" required>
			</mat-form-field>
		</div>
		<div class="form-group">
			<mat-checkbox name="agree" required="true" [(ngModel)]="model.agree" #agree="ngModel">I agree the
				<a href="javascript:;">terms & conditions</a>
			</mat-checkbox>
		</div>
	</form>
	<!--end::Form-->

	<!--begin::Action-->
	<div class="m-login__action m-login__action--fit">
		<button mat-button (click)="loginPage($event)" [disabled]="loading" translate="AUTH.GENERAL.BACK_BUTTON">Back</button>
		<m-spinner-button [options]="spinner" (click)="submit()">{{'AUTH.GENERAL.SIGNUP_BUTTON' | translate}}</m-spinner-button>
	</div>
	<!--end::Action-->
</div>
<!--end::Signin-->
